<template>
  <div class="plane-container">
    <el-button
      style="position: absolute; top: 2%; left: 5%"
      type="info"
      @click="visible = true"
      >添加客机</el-button
    >

    <el-table
      :data="tableData"
      style="width: 99.8%; position: absolute; right: 0; margin-top: 5%"
      @selection-change="handleSelectionChange"
    >
      <el-table-column label="编号" prop="planeId" width="150">
      </el-table-column>
      <el-table-column label="型号" prop="model" width="150"> </el-table-column>
      <el-table-column prop="companyName" label="所属航司" width="250">
      </el-table-column>
      <el-table-column prop="economyClass" label="经济舱座位数" width="150">
      </el-table-column>
      <el-table-column prop="businessClass" label="商务舱座位数" width="150">
      </el-table-column>
      <el-table-column>
        <template slot-scope="scope">
          <el-tag size="medium" style="position: absolute; left: 3%; top: 19%" v-if="scope.row.status === 0" type="success">空闲</el-tag>
          <el-tag size="medium" style="position: absolute; left: 3%; top: 19%" v-if="scope.row.status === 1" type="warning">任务</el-tag>
          <el-button
            size="mini"
            type="info"
            @click="
              visible2 = true;
              getPlaneMessage(scope.$index, scope.row);
            "
            style="position: absolute; left: 23%; top: 19%"
            >编辑客机信息</el-button
          >
          <el-button
            size="mini"
            type="danger"
            @click="deletePlane(scope.$index, scope.row)"
            style="position: absolute; left: 60%; top: 19%"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <el-dialog title="添加客机" :visible.sync="visible">
      <el-form
        ref="form"
        :model="planeMessage"
        label-width="80px"
        :rules="rules"
      >
        <el-form-item label="客机型号" prop="model">
          <el-input
            v-model="planeMessage.model"
            :validate-event="planeMessage.model == '' ? false : true"
          ></el-input>
        </el-form-item>
        <el-form-item label="所属航司" prop="companyName">
          <el-input
            v-model="planeMessage.companyName"
            :validate-event="planeMessage.companyName == '' ? false : true"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="经济舱座位数"
          prop="economyClass"
        >
          <el-input
            v-model="planeMessage.economyClass"
            :validate-event="planeMessage.economyClass == '' ? false : true"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="商务舱座位数"
          prop="businessClass"
        >
          <el-input
            v-model="planeMessage.businessClass"
            :validate-event="planeMessage.businessClass == '' ? false : true"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="addPlane('form')"
            >立即创建</el-button
          >
          <el-button @click="visible = false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

    <el-dialog title="编辑客机信息" :visible.sync="visible2">
      <el-form ref="form" :model="plane" label-width="80px" :rules="rules">
        <el-form-item label="客机型号" prop="model">
          <el-input v-model="plane.model"></el-input>
        </el-form-item>
        <el-form-item label="所属航司" prop="companyName">
          <el-input v-model="plane.companyName"></el-input>
        </el-form-item>
        <el-form-item
          label="经济舱座位数"
          prop="economyClass"
        >
          <el-input v-model="plane.economyClass"></el-input>
        </el-form-item>
        <el-form-item
          label="商务舱座位数"
          prop="businessClass"
        >
          <el-input v-model="plane.businessClass"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="modifyPlaneMessage('form')"
            >确认修改</el-button
          >
          <el-button @click="visible2 = false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

    <el-pagination
      layout="prev, pager, next"
      :total="total"
      :page-size="pageSize"
      :current-page.sync="currentPage"
      @current-change="nextPage()"
      style="position: absolute; bottom: 10%; left: 32%"
    >
    </el-pagination>
  </div>
</template>

<script>
import {
  getPlanePage,
  deletePlane,
  addPlane,
  getPlaneMessage,
  modifyPlaneMessage,
} from "../api/plane";
import { Message } from "element-ui";

export default {
  name: "Plane",
  data() {
    var validQC = (rule, value, callback) => {
      if (value) {
        if (/[\u4E00-\u9FA5]/g.test(value) || /^\d{1,}$/.test(value)) {
          callback(new Error("请输入正确的客机型号（数字与字母）"));
        } else {
          // 验证通过
          callback();
        }
        callback();
      } else {
        callback(new Error("请输入航班编号"));
      }
    };
    return {
      visible: false,
      visible2: false,
      total: 0,
      pageSize: 6,
      currentPage: 0,
      tableData: [],
      plane: {},
      planeMessage: {
        model: "",
        companyName: "",
        economyClass: "",
        businessClass: "",
      },
      rules: {
        model: [{ required: true, message: "请输入客机编号", trigger: "blur" }],
        companyName: [
          { required: true, message: "请输入所属航司", trigger: "blur" },
        ],
        economyClass: [
          { required: true, message: "请输入经济舱座位数", trigger: "blur" },
        ],
        businessClass: [
          { required: true, message: "请输入商务舱座位数", trigger: "blur" },
        ],
      },
    };
  },

  methods: {
    handleSelectionChange(val) {
      console.log(val);
    },

    deletePlane(index, plane) {
      const _this = this;
      this.$confirm("是否删除客机" + plane.planeId + "?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          deletePlane({
            planeId: plane.planeId,
          }).then(function (response) {
            Message({
              message: response.data.message,
              type: "success",
              duration: 2 * 1000,
            });
            getPlanePage({
              pageSize: _this.pageSize,
              pageNum: _this.currentPage,
            }).then(function (response) {
              _this.total = response.data.obj.total;
              _this.tableData = response.data.obj.planeList;
            });
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },

    addPlane(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          const _this = this;
          addPlane({
            companyName: this.planeMessage.companyName,
            economyClass: this.planeMessage.economyClass,
            businessClass: this.planeMessage.businessClass,
            model: this.planeMessage.model,
          }).then(function (response) {
            Message({
              message: response.data.message,
              type: "success",
              duration: 2 * 1000,
            });
            _this.visible = false;
            getPlanePage({
              pageSize: _this.pageSize,
              pageNum: _this.currentPage,
            }).then(function (response) {
              _this.total = response.data.obj.total;
              _this.tableData = response.data.obj.planeList;
            });
          });
        } else {
          console.log("error submit!!");
        }
      });
    },

    getPlaneMessage(index, plane) {
      const _this = this;
      getPlaneMessage({
        planeId: plane.planeId,
      }).then(function (response) {
        _this.plane = response.data.obj;
      });
    },

    modifyPlaneMessage(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          const _this = this;
          modifyPlaneMessage({
            planeId: this.plane.planeId,
            model: this.plane.model,
            economyClass: this.plane.economyClass,
            businessClass: this.plane.businessClass,
            companyName: this.plane.companyName,
          }).then(function (response) {
            Message({
              message: response.data.message,
              type: "success",
              duration: 2 * 1000,
            });
            _this.visible2 = false;
            getPlanePage({
              pageSize: _this.pageSize,
              pageNum: _this.currentPage,
            }).then(function (response) {
              _this.total = response.data.obj.total;
              _this.tableData = response.data.obj.planeList;
            });
          });
        } else {
          console.log("error submit!!");
        }
      });
    },

    nextPage() {
      const _this = this;
      getPlanePage({
        pageSize: this.pageSize,
        pageNum: this.currentPage,
      }).then(function (response) {
        _this.total = response.data.obj.total;
        _this.tableData = response.data.obj.planeList;
      });
    },
  },

  created() {
    const _this = this;
    getPlanePage({
      pageSize: this.pageSize,
      pageNum: 1,
    }).then(function (response) {
      _this.total = response.data.obj.total;
      _this.tableData = response.data.obj.planeList;
      console.log(_this.tableData)
    });
  },
};
</script>

<style>
* {
  padding: 0;
  margin: 0;
}
</style>
